// 自定义指令 导出指令配置对象
// export default {
//     bind(el, binding) {
//         // el 被绑定元素真实dom
//         // binding 指令信息
//         // 只调用一次，指令第一次绑定到元素时调用
//         console.log('只调用一次，指令第一次绑定到元素时调用', binding)
//     },
//     inserted(el, binding) {
//         // 被绑定元素插入父节点时调用
//         console.log('被绑定元素插入父节点时调用')
//     },
//     update(el, binding) {
//         // 所在组件的vnode更新时调用
//         console.log('所在组件的vnode更新时调用')
//         // 根据 binding.value 的值决定创建或删除img元素
//     }
// }

// 如果
import loadingSrc from '@/assets/loading.svg'
import style from './loading.module.less'
export default function (el, binding) {
    let img = isExists(el)
    if (!img) {
        img = createLoadingImg()
        img.className = style.loading
        el.appendChild(img)
    }
    if (!binding.value) {
        img.remove()
    }
}

// 判断el中是否存在loading效果的dom
function isExists(el) {
    return el.querySelector("img[data-role=loading]")
}

function createLoadingImg() {
    const img = document.createElement('img')
    img.dataset.role = "loading"
    img.src = loadingSrc
    return img
}